import { Link } from 'react-router-dom';
import { cn } from '@/lib/utils';
import { useCompanyInfo, useContactInfo } from '@/hooks/useCompany';
import { CompanyInfo, ContactInfo } from '@/types';

// 默认公司信息（作为后备）
const defaultCompanyInfo: CompanyInfo = {
  company_name: '环境工程咨询有限公司',
  company_description: '专注于环境工程咨询领域，提供全方位的环保技术服务，助力绿色发展，守护生态环境。'
};

// 默认联系信息（作为后备）
const defaultContactInfo: ContactInfo = {
  phone: '020-12345678',
  email: 'info@gzlfhjgc.com',
  address: '广东省广州市天河区珠江新城华夏路88号'
};

export default function Footer() {
  // 获取公司信息和联系信息
  const { data: companyInfo } = useCompanyInfo();
  const { data: contactInfo } = useContactInfo();

  // 使用API数据或默认数据
  const company = companyInfo || defaultCompanyInfo;
  const contact = contactInfo || defaultContactInfo;

  return (
    <footer className="bg-gray-900 text-white pt-16 pb-8">
      <div className="container mx-auto px-4">
        <div className="grid md:grid-cols-4 gap-8 mb-12">
          <div>
            <div className="flex items-center mb-6">
              <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
                <span className="text-white font-bold text-xl">GC</span>
              </div>
              <span className="text-xl font-bold">{company.company_name}</span>
            </div>
            <p className="text-gray-400 mb-6">
              {company.company_description}
            </p>
            <div className="flex space-x-4">
              <a href="#" className="w-10 h-10 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition-colors">
                <i className="fa-brands fa-weixin"></i>
              </a>
              <a href="#" className="w-10 h-10 bg-gray-800 hover:bg-blue-400 rounded-full flex items-center justify-center transition-colors">
                <i className="fa-brands fa-weibo"></i>
              </a>
              <a href="#" className="w-10 h-10 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center justify-center transition-colors">
                <i className="fa-brands fa-linkedin"></i>
              </a>
            </div>
          </div>
          
          <div>
            <h4 className="text-lg font-semibold mb-6">快速链接</h4>
            <ul className="space-y-3">
              <li><Link to="/" className="text-gray-400 hover:text-white transition-colors">首页</Link></li>
              <li><Link to="/about" className="text-gray-400 hover:text-white transition-colors">关于我们</Link></li>
              <li><Link to="/news" className="text-gray-400 hover:text-white transition-colors">新闻动态</Link></li>
              <li><Link to="/services" className="text-gray-400 hover:text-white transition-colors">业务范围</Link></li>
              <li><Link to="/contact" className="text-gray-400 hover:text-white transition-colors">联系我们</Link></li>
            </ul>
          </div>
          
          <div>
            <h4 className="text-lg font-semibold mb-6">业务范围</h4>
            <ul className="space-y-3">
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">环境影响评价</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">污染治理工程</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">生态环境修复</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">环境监测检测</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">环保政策咨询</a></li>
            </ul>
          </div>
          
          <div>
            <h4 className="text-lg font-semibold mb-6">联系我们</h4>
            <ul className="space-y-3">
              <li className="flex items-start">
                <i className="fa-solid fa-map-marker-alt text-blue-500 mt-1 mr-3"></i>
                <span className="text-gray-400">{contact.address}</span>
              </li>
              <li className="flex items-center">
                <i className="fa-solid fa-phone text-blue-500 mr-3"></i>
                <span className="text-gray-400">{contact.phone}</span>
              </li>
              <li className="flex items-center">
                <i className="fa-solid fa-envelope text-blue-500 mr-3"></i>
                <span className="text-gray-400">{contact.email}</span>
              </li>
            </ul>
          </div>
        </div>
        
        <div className="border-t border-gray-800 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="text-gray-500 text-sm mb-4 md:mb-0">
              <p>&copy; {new Date().getFullYear()} {company.company_name}. 保留所有权利.</p>
              <p className="mt-1">
                <a 
                  href="https://beian.miit.gov.cn/" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="hover:text-gray-300 transition-colors mr-4"
                >
                  黔ICP备2025055725号-1
                </a>
                <a 
                  href="http://www.beian.gov.cn/portal/registerSystemInfo" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="hover:text-gray-300 transition-colors"
                >
                  {/* 公安备案通过后，将此处替换为实际备案号，格式如：黔公网安备xxxxxxxxxxxxx号 */}
                  公安备案办理中...
                </a>
              </p>
            </div>
            <div className="flex space-x-6">
              <a href="#" className="text-gray-500 hover:text-gray-300 text-sm transition-colors">隐私政策</a>
              <a href="#" className="text-gray-500 hover:text-gray-300 text-sm transition-colors">使用条款</a>
              <a href="#" className="text-gray-500 hover:text-gray-300 text-sm transition-colors">网站地图</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}